<!DOCTYPE html>
<html>
    <head>
        <title>New Subcontract 2</title>
        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.24/vanta.waves.min.js"></script>
        <script type="module" src="./vantaBackground.js"></script>
        <style>
            body {
                font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
                background: rgba(98, 105, 100, 0.655);
                color: #fff;
                margin: 0;
                padding: 20px;
            }
            h1 {
                text-align: center;
                color: #fff;
                margin-bottom: 30px;
            }
            .parent-flexbox {
                align-items: center;
                display: flex;
                justify-content: center;
                gap: 80px;
                flex: 1;
                flex-wrap: wrap;
                max-width: 100%;
            }
            .parent-flexbox > div {
                margin-left: 42px;
            }
            
            /* 响应式布局 */
            @media (max-width: 1200px) {
                .parent-flexbox {
                    gap: 40px;
                }
            }
            
            @media (max-width: 768px) {
                .parent-flexbox {
                    flex-direction: column;
                    gap: 20px;
                }
                .parent-flexbox > div {
                    margin-left: 0;
                }
                
                .data-preview-container,
                .result-container,
                .log-container {
                    width: calc(100% - 20px);
                    margin: 10px;
                }
            }
            .form-container {
                width: 400px;
                background: linear-gradient(#212121, #212121) padding-box,
                            linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;
                border: 3px solid transparent;
                padding: 24px 24px;
                font-size: 14px;
                font-family: inherit;
                color: white;
                display: flex;
                flex-direction: column;
                gap: 20px;
                box-sizing: border-box;
                border-radius: 16px;
                background-size: 200% 100%;
                animation: gradient 5s ease infinite;
            }
            @keyframes gradient {
                0% {
                    background-position: 0% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
                100% {
                    background-position: 0% 50%;
                }
            }
            .form-container .form-group {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .file-input-container {
                position: relative;
                overflow: hidden;
                display: inline-block;
                width: 100%;
            }
            .file-input {
                position: absolute;
                left: -9999px;
            }
            .file-input-label {
                display: block;
                padding: 12px 20px;
                background: linear-gradient(145deg, #626aef, #4a52d9);
                color: white;
                border-radius: 8px;
                cursor: pointer;
                text-align: center;
                transition: all 0.3s ease;
                border: 2px solid transparent;
            }
            .file-input-label:hover {
                background: linear-gradient(145deg, #4a52d9, #626aef);
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(98, 106, 239, 0.3);
            }
            .file-name {
                margin-top: 10px;
                padding: 8px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 4px;
                font-size: 12px;
                text-align: center;
                display: none;
            }
            .button {
                height: 50px;
                width: 200px;
                position: relative;
                background-color: transparent;
                cursor: pointer;
                border: 2px solid #252525;
                overflow: hidden;
                border-radius: 30px;
                color: #333333;
                transition: all 0.5s ease-in-out;
            }
            .btn-txt {
                z-index: 1;
                font-weight: 800;
                letter-spacing: 4px;
            }
            .type1::after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                transition: all 0.5s ease-in-out;
                background-color: #f826c7;
                border-radius: 30px;
                visibility: hidden;
                height: 10px;
                width: 10px;
                z-index: -1;
            }
            .button:hover {
                box-shadow: 1px 1px 200px #252525;
                color: #fff;
                border: none;
            }
            .type1:hover::after {
                visibility: visible;
                transform: scale(100) translateX(2px);
            }
            .button:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
            .button:disabled:hover {
                box-shadow: none;
                color: #333333;
                border: 2px solid #252525;
            }
            .button:disabled::after {
                visibility: hidden;
            }
            .checkbox-wrapper-35 .switch {
                display: none;
            }
            .checkbox-wrapper-35 .switch + label {
                -webkit-box-align: center;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;
                color: #27272f;
                cursor: pointer;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 12px;
                line-height: 15px;
                position: relative;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .checkbox-wrapper-35 .switch + label::before,
            .checkbox-wrapper-35 .switch + label::after {
                content: '';
                display: block;
            }
            .checkbox-wrapper-35 .switch + label::before {
                background-color: #05012c;
                border-radius: 500px;
                height: 20px;
                margin-right: 8px;
                -webkit-transition: background-color 0.125s ease-out;
                transition: background-color 0.125s ease-out;
                width: 40px;
            }
            .checkbox-wrapper-35 .switch + label::after {
                background-color: #fff;
                border-radius: 13px;
                box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
                height: 18px;
                left: 1px;
                position: absolute;
                top: 1px;
                -webkit-transition: -webkit-transform 0.125s ease-out;
                transition: -webkit-transform 0.125s ease-out;
                transition: transform 0.125s ease-out;
                transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
                width: 18px;
            }
            .checkbox-wrapper-35 .switch + label .switch-x-text {
                display: block;
                margin-right: .3em;
            }
            .checkbox-wrapper-35 .switch + label .switch-x-toggletext {
                display: block;
                font-weight: bold;
                height: 15px;
                overflow: hidden;
                position: relative;
                width: 40px;
            }
            .checkbox-wrapper-35 .switch + label .switch-x-unchecked,
            .checkbox-wrapper-35 .switch + label .switch-x-checked {
                left: 0;
                position: absolute;
                top: 0;
                -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
                transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
                transition: transform 0.125s ease-out, opacity 0.125s ease-out;
                transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
            }
            .checkbox-wrapper-35 .switch + label .switch-x-unchecked {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }
            .checkbox-wrapper-35 .switch + label .switch-x-checked {
                opacity: 0;
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
            }
            .checkbox-wrapper-35 .switch + label .switch-x-hiddenlabel {
                position: absolute;
                visibility: hidden;
            }
            .checkbox-wrapper-35 .switch:checked + label::before {
                background-color: #ffb500;
            }
            .checkbox-wrapper-35 .switch:checked + label::after {
                -webkit-transform: translate3d(20px, 0, 0);
                transform: translate3d(20px, 0, 0);
            }
            .checkbox-wrapper-35 .switch:checked + label .switch-x-unchecked {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
            .checkbox-wrapper-35 .switch:checked + label .switch-x-checked {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }
            .switch-container{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
            .checkbox-wrapper-35 {
                margin-bottom: 10px;
            }
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                width: 100%;
            }
            button-back {
                align-items: center;
                background-color: transparent;
                color: #fff;
                cursor: pointer;
                display: flex;
                font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
                font-size: 1rem;
                font-weight: 700;
                line-height: 1.5;
                text-decoration: none;
                text-transform: uppercase;
                outline: 0;
                border: 0;
                padding: 1rem;
            }
            button-back:before {
                background-color: #fff;
                content: "";
                display: inline-block;
                height: 1px;
                margin-right: 10px;
                transition: all .42s cubic-bezier(.25,.8,.25,1);
                width: 0;
            }
            button-back:hover:before {
                background-color: #fff;
                width: 3rem;
            }
            .vanta-container {
                width: 100%;
                height: 100vh;
                position: fixed;
                top: 0;
                left: 0;
                z-index: -1;
            }
            
            /* 进度条样式 */
            .progress-container {
                width: 100%;
                background-color: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                margin-bottom: 20px;
                margin-top: 20px;
                display: none;
                overflow: hidden;
                height: 8px;
            }
            .progress-bar {
                height: 100%;
                background: linear-gradient(90deg, #4285F4, #f826c7);
                border-radius: 10px;
                width: 0%;
                transition: width 0.5s ease;
                box-shadow: 0 0 10px rgba(66, 133, 244, 0.5);
            }
            
            /* 数据预览和结果显示样式 */
            .data-preview-container, .result-container {
                margin-top: 20px;
                width: calc(100% - 40px);
                max-width: 100%;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                padding: 20px;
                display: none;
                margin-left: 20px;
                margin-right: 20px;
                box-sizing: border-box;
            }
            
            .data-preview-title, .result-title {
                color: #fff;
                font-size: 18px;
                margin-bottom: 15px;
                text-align: center;
            }
            
            .data-table {
                width: 100%;
                border-collapse: collapse;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 8px;
                overflow: hidden;
                table-layout: auto;
                word-wrap: break-word;
            }
            
            .data-table th, .data-table td {
                padding: 8px 12px;
                text-align: left;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                color: #fff;
                max-width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            .data-table th {
                background: rgba(98, 106, 239, 0.3);
                font-weight: bold;
                position: sticky;
                top: 0;
                z-index: 10;
            }
            
            .data-table tr:hover {
                background: rgba(255, 255, 255, 0.05);
            }
            
            /* 表格容器添加水平滚动 */
            .table-wrapper {
                width: 100%;
                overflow-x: auto;
                overflow-y: auto;
                max-height: 400px;
                border-radius: 8px;
            }
            
            .log-container {
                margin-top: 20px;
                width: calc(100% - 40px);
                max-width: 100%;
                background: rgba(0, 0, 0, 0.3);
                border-radius: 10px;
                padding: 20px;
                max-height: 300px;
                overflow-y: auto;
                display: none;
                margin-left: 20px;
                margin-right: 20px;
                box-sizing: border-box;
            }
            
            .log-title {
                color: #fff;
                font-size: 16px;
                margin-bottom: 10px;
            }
            
            .log-item {
                padding: 8px;
                margin-bottom: 5px;
                border-radius: 4px;
                font-size: 14px;
                border-left: 3px solid;
            }
            
            .log-item.info {
                background: rgba(66, 133, 244, 0.1);
                border-left-color: #4285F4;
                color: #87CEEB;
            }
            
            .log-item.warning {
                background: rgba(255, 193, 7, 0.1);
                border-left-color: #FFC107;
                color: #FFE082;
            }
            
            .log-item.error {
                background: rgba(244, 67, 54, 0.1);
                border-left-color: #F44336;
                color: #FFCDD2;
            }
            
            .log-time {
                font-size: 12px;
                opacity: 0.7;
                margin-right: 10px;
            }
            
            /* 兼容 batch-combine3 样式的日志项 */
            .error-log {
                color: #ff4d4f;
                margin-bottom: 5px;
                font-size: 14px;
            }
            
            .info-log {
                color: #52c41a;
                margin-bottom: 5px;
                font-size: 14px;
            }
            
            /* 结果表格样式 - 参考 batch-combine3 */
            .result-table {
                width: 100%;
                border-collapse: collapse;
                margin-top: 10px;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 8px;
                overflow: hidden;
                table-layout: auto;
                word-wrap: break-word;
            }
            
            .result-table th {
                padding: 8px 12px;
                border-bottom: 2px solid rgba(255, 255, 255, 0.2);
                text-align: left;
                color: #fff;
                background: rgba(255, 255, 255, 0.1);
                font-weight: bold;
                position: sticky;
                top: 0;
                z-index: 10;
                max-width: 150px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            .result-table td {
                padding: 8px 12px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                color: #fff;
                max-width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            .result-table tr {
                background: rgba(255, 255, 255, 0.05);
            }
            
            .result-table tr:hover {
                background: rgba(255, 255, 255, 0.1);
            }
            
            /* 结果容器样式 */
            .result-container {
                margin-top: 20px;
                width: calc(100% - 40px);
                max-width: 100%;
                overflow-x: auto;
                display: none;
                margin-left: 20px;
                margin-right: 20px;
                box-sizing: border-box;
            }
            
            .result-container h3 {
                color: #fff;
                margin-top: 20px;
                margin-bottom: 15px;
            }
            
            /* 状态指示器样式 */
            .status-success {
                color: #52c41a;
                font-weight: bold;
            }
            
            .status-failed {
                color: #ff4d4f;
                font-weight: bold;
            }
            
            .status-processing {
                color: #1890ff;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div id="vanta-background" class="vanta-container"></div>
        <h1>New Subcontract 2</h1>

        <div id="combine">
            <div class="parent-flexbox">
                <div class="switch-container">
                    <div class="checkbox-wrapper-35">
                        <input 
                            type="checkbox" 
                            id="switch" 
                            class="switch"
                            checked
                        />
                        <label for="switch">
                            <span class="switch-x-text">GPO </span>
                            <span class="switch-x-toggletext">
                                <span class="switch-x-unchecked"><span class="switch-x-hiddenlabel">Unchecked: </span>UAT</span>
                                <span class="switch-x-checked"><span class="switch-x-hiddenlabel">Checked: </span>PRD</span>
                            </span>
                        </label>
                    </div>
                    <div class="checkbox-wrapper-35">
                        <input 
                            type="checkbox" 
                            id="headless-switch" 
                            class="switch"
                        />
                        <label for="headless-switch">
                            <span class="switch-x-text">Steps </span>
                            <span class="switch-x-toggletext">
                                <span class="switch-x-unchecked"><span class="switch-x-hiddenlabel">Unchecked: </span>Hide</span>
                                <span class="switch-x-checked"><span class="switch-x-hiddenlabel">Checked: </span>Show</span>
                            </span>
                        </label>
                    </div>
                </div>
                <!-- 文件上传区域 -->
                <div class="form-container">
                    <div class="form-group">
                        <div class="file-input-container">
                            <input type="file" id="file-input" class="file-input" accept=".xlsx,.xls">
                            <label for="file-input" class="file-input-label">
                                📁 Import Excel File
                            </label>
                            <div id="file-name" class="file-name"></div>
                        </div>
                        <button class="button type1" id="download-template" style="height: 40px; width: 100%; margin-top: 10px;">
                            <span class="btn-txt">Download Template</span>
                        </button>
                    </div>
                </div>
                <div style="display: flex; flex-direction: column; gap: 10px;">
                    <button class="button type1" id="start-button" disabled>
                        <span class="btn-txt">START</span>
                    </button>
                    <button class="button type1" id="close-preview" style="display: none;">
                        <span class="btn-txt">Close Preview</span>
                    </button>
                </div>
            </div>
            
            <!-- 进度条容器 -->
            <div id="progress-container" class="progress-container">
                <div id="progress-bar" class="progress-bar"></div>
                <div id="progress-text" style="color: #fff; text-align: center; margin-top: 5px; font-size: 14px;"></div>
            </div>
            
            <!-- 数据预览容器 -->
            <div id="data-preview" class="data-preview-container">
                <div class="data-preview-title">Excel Data Preview</div>
                <div class="table-wrapper">
                    <div id="preview-content"></div>
                </div>
            </div>
            
            <!-- 结果显示容器 -->
            <div id="result-container" class="result-container">
                <!-- 结果内容将通过JavaScript动态生成 -->
            </div>
            
            <!-- 日志显示容器 -->
            <div id="log-container" class="log-container">
                <div class="log-title">Processing Logs</div>
                <div id="log-content"></div>
            </div>
        </div>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>    
         <script src="https://unpkg.com/element-plus"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
         <script src="new-subcontract2.js"></script>        
        <script type="module">
            import { initVantaBackground, destroyVantaBackground } from './vantaBackground.js';
            document.addEventListener('DOMContentLoaded', async() => {
                if (htmlUIAPI) {
                    htmlUIAPI.injectWindowControls();
                }
                // 初始化 Vanta 背景
                if (typeof VANTA !== 'undefined') {
                    initVantaBackground('vanta-background');

                    // 页面卸载时销毁 Vanta 背景
                    window.addEventListener('beforeunload', () => {
                        destroyVantaBackground();
                    });
                } else {
                    console.error('VANTA 库未正确加载');
                }
                
                // 初始化插件功能
                if (typeof init === 'function') {
                    init();
                }
            });
        </script>
    </body>
</html>